<template>
  <div class="dd">
    <div class="s">
      <div class="s1">
        <div class="s2">
          <div class="s3">
            <img src="../assets/首页_slices/打造前程标志(1).jpg" />
          </div>
          <div class="s4">
            <li>首页</li>
            <li>集团概况</li>
            <li>集团产业</li>
            <li>集团新闻</li>
            <li>合作院校</li>
            <li>联系我们</li>
            <li>招聘信息</li>
          </div>
        </div>
      </div>
      <div class="s5">
        <div class="s6">
          <p>联系我们</p>
          <h1>欢迎联系我们</h1>
        </div>
      </div>
      <div class="s7">
        <div class="s8">
          <h2>当前位置：首页 > 新闻中心 ></h2>
        </div>
      </div>
    </div>
    <div class="ss">
      <div class="ss1">
        <div class="ss2" v-for="(zzz, index) in xxx" :key="index">
          <!--zzz是value值 数组整个内容，index是下标，xxx是数组的名字，key是唯一，:是v-band，绑定属性的一个  -->
          <div class="ss3">
            <div class="ss4">
              <div>{{ zzz.title }}</div>
            </div>
            <div class="ss5">
              <div>{{ zzz.msg }}</div>
            </div>
          </div>
          <div class="ss6">
            <div class="ss7" v-for="(zzzz, index) in xxxx" :key="index">
              <div class="ss8">{{ zzzz.title }}</div>
              <div class="ss9">{{ zzzz.msg }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ss10">
        <div class="ss11">
          <div class="ss12">
            <div>《</div>
          </div>
          <div class="ss13">
            <h4>1</h4>
          </div>
          <div class="ss14">
            <p>2</p>
          </div>
          <div class="ss15">
            <p>3</p>
          </div>
          <div class="ss16">
            <p>4</p>
          </div>
          <div class="ss17">
            <p>5</p>
          </div>
          <div class="ss18">
            <p>6</p>
          </div>
          <div class="ss19">
            <p>···</p>
          </div>
          <div class="ss20">
            <p>20</p>
          </div>
          <div class="ss21">
            <div>》</div>
          </div>
        </div>
      </div>
    </div>
    <div class="m">
      <div class="m1">
        <div class="m2">
          <div>申请职位</div>
        </div>
      </div>
      <div class="m3">
        <div class="m4">
          <div class="m5">
            <div class="m6">
              <h1>姓名：</h1>
            </div>
            <input type="text" placeholder="请输入您的称呼" />
          </div>
          <div class="m7">
            <div class="m8">
              <h1>学历：</h1>
            </div>
            <input type="text" placeholder="请输入您的联系电话 " />
          </div>
          <div class="m9">
            <div class="m10">
              <h1>工作年限：</h1>
            </div>
            <input type="text" placeholder="请输入您的工作年限" />
          </div>
          <div class="m11">
            <div class="m12">
              <h1>简历：</h1>
            </div>
            <div class="m13">
              <input type="text" placeholder="请上传年的简历" />
            </div>
          </div>
          <button>提交</button>
        </div>
        <div class="m14">
          <div class="m15">
            <h2>咨询热线</h2>
            <p>400-000-000</p>
          </div>
          <div class="m16">
            <h2>联系邮箱</h2>
            <p>logo@163.com</p>
          </div>
        </div>
      </div>
    </div>
    <BeauTial></BeauTial>
  </div>
</template>

<script>
import BeauTial from "/桌面/dzqc/src/components/BeauTial.vue";
export default {
  name: "ZpXx",
  data() {
    return {
      xxx: [
        {
          title: "行政运营",
          msg: "面议",
        },
        {
          title: "网站技术/研发工程师",
          msg: "面议",
        },
        {
          title: "行政运营",
          msg: "面议",
        },
        {
          title: "网站技术/研发工程师",
          msg: "面议",
        },
        {
          title: "行政运营",
          msg: "面议",
        },
        {
          title: "网站技术/研发工程师",
          msg: "面议",
        },
        {
          title: "行政运营",
          msg: "面议",
        },
        {
          title: "网站技术/研发工程师",
          msg: "面议",
        },
        {
          title: "行政运营",
          msg: "面议",
        },
        {
          title: "网站技术/研发工程师",
          msg: "面议",
        },
      ],
      xxxx: [
        {
          title: "学历要求：",
          msg: "大专以上",
        },
        {
          title: "工作经验：",
          msg: "2年以上",
        },
        {
          title: "招聘人数：",
          msg: "2人",
        },
        {
          title: "工作地点：",
          msg: "河南郑州",
        },
        {
          title: "截止时间：",
          msg: "2019-12-30",
        },
      ],
    };
  },
  components: {
    BeauTial,
  },
};
</script>
<style scoped>
dd {
  width: 1920px;
  height: 2503px;
  /* border: 1px solid red; */
}
.s {
  width: 1920px;
  height: 428px;
  /* border: 1px solid red; */
}
.s1 {
  width: 1920px;
  height: 56px;
  margin-top: 23px;
  display: flex;
  /* border: 1px solid red; */
}
.s2 {
  width: 1200px;
  height: 54px;
  display: flex;
  margin-left: 360px;
  /* border: 1px solid red; */
}
.s3 {
  margin-top: -6px;
}
.s4 {
  width: 656px;
  height: 22px;
  display: flex;
  margin-left: 363px;
  list-style-type: none;
  margin-top: 16px;
  /* border: 1px solid red; */
}
.s4 li {
  font-size: 16px;
  font-weight: 400;
  color: #444444;
  line-height: 22px;
  padding-left: 34px;
}
.s5 {
  width: 1920px;
  height: 300px;
  background: url(../assets/招聘信息/qq.png);
  /* border: 1px solid red; */
}
.s6 {
  width: 270px;
  height: 78px;
  padding-top: 115px;
  margin-left: 918px;
  /* border: 1px solid red; */
}
.s6 p {
  height: 28px;
  font-size: 36px;
  color: #ffffff;
  margin-top: -4px;
}
.s6 h1 {
  width: 270px;
  height: 25px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}
.s7 {
  width: 1920px;
  height: 46px;
  /* border: 1px solid red; */
}
.s8 {
  width: 227px;
  height: 17px;
  margin-left: 360px;
  margin-top: 15px;
  border: 1px solid white;
}
.s8 h2 {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 2px;
}
.ss {
  width: 1920px;
  height: 1144px;
  border: 1px solid white;
}
.ss1 {
  width: 1200px;
  height: 970px;
  margin-left: 360px;
  display: flex;
  margin-top: 60px;
  /* border: 1px solid red; */
  flex-wrap: wrap;
  justify-content: space-between;
}
.ss2 {
  width: 580px;
  height: 151px;
  background: #f8f8f8;
  /* border: 1px solid red; */
}
.ss3 {
  width: 516px;
  height: 24px;
  margin-left: 32px;
  display: flex;
  margin-top: 32px;
  /* border: 1px solid red; */
}
.ss4,
.ss5 {
  width: 220px;
  height: 24px;
  /* border: 1px solid red; */
}
.ss5 {
  margin-left: 76px;
}
.ss4 div,
.ss5 div {
  font-size: 18px;
  color: #23337f;
  line-height: 24px;
}
.ss5 div {
  margin-left: 178px;
}
.ss6 {
  width: 580px;
  height: 58px;
  margin-left: 32px;
  flex-wrap: wrap;
  display: flex;
  margin-top: 21px;
  /* border: 1px solid red; */
}
.ss7 {
  width: 155px;
  height: 24px;
  display: flex;
  margin-right: 25px;
  /* border: 1px solid red; */
}
.ss8 {
  color: #999999;
  font-size: 14px;
}
.ss10 {
  width: 1200px;
  height: 104px;
  margin-left: 360px;
  /* border: 1px solid red; */
}
.ss11 {
  width: 490px;
  height: 40px;
  margin-top: 30px;
  margin-left: 355px;
  display: flex;
  /* border: 1px solid red; */
}
.ss12,
.ss13,
.ss14,
.ss15,
.ss16,
.ss17,
.ss18,
.ss19,
.ss20,
.ss21 {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  /* border: 1px solid red; */
}
.ss12 div,
.ss21 div {
  width: 28px;
  text-align: center;
  line-height: 40px;
}
.ss13 {
  background: #23337f;
}
.ss13 h4 {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 8px;
  text-align: center;
}
.ss14 p,
.ss15 p,
.ss16 p,
.ss17 p,
.ss18 p,
.ss19 p,
.ss20 p {
  font-size: 14px;
  color: #666666;
  text-align: center;
}
.m {
  width: 1920px;
  height: 582px;
  background: #f8f8f8;
  border: 1px solid white;
}
.m1 {
  width: 1200px;
  height: 45px;
  margin-left: 360px;
  margin-top: 65px;
  /* border: 1px solid red; */
}
.m2 {
  width: 128px;
  height: 45px;
  /* border: 1px solid red; */
}
.m2 div {
  font-size: 32px;
  color: #444444;
}
.m3 {
  width: 1200px;
  height: 388px;
  margin-left: 360px;
  margin-top: 24px;
  display: flex;
  /* border: 1px solid red; */
}
.m4 {
  width: 900px;
  height: 388px;
  background: #ffffff;
  /* border: 1px solid red; */
}
.m5 {
  margin-top: 52px;
}
.m7,
.m9,
.m11 {
  margin-top: 16px;
}
.m5,
.m7 {
  width: 340px;
  height: 40px;
  display: flex;
  margin-left: 82px;
  /* border: 1px solid red; */
}
.m5 input,
.m7 input,
.m9 input {
  width: 280px;
  height: 40px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  background: #f8f8f8;
}
.m6,
.m8,
.m12 {
  width: 48px;
  height: 22px;
  margin-top: 8px;
  /* border: 1px solid red; */
}
.m6 h1,
.m8 h1,
.m10 h1,
.m12 h1 {
  font-size: 16px;
  font-weight: 400;
  color: #444444;
  line-height: 3px;
}
.m9 {
  width: 410px;
  height: 40px;
  display: flex;
  margin-left: 50px;
  /* border: 1px solid red; */
}
.m10 {
  width: 80px;
  height: 22px;
  margin-top: 8px;
}
.m11 {
  width: 762px;
  height: 40px;
  display: flex;
  margin-left: 80px;
  /* border: 1px solid red; */
}
.m11 input {
  width: 704px;
  height: 40px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  background: #f8f8f8;
}
.m13 {
  width: 704px;
  height: 40px;
}
.m4 button {
  width: 180px;
  height: 40px;
  margin-left: 128px;
  margin-top: 36px;
  background: #23337f;
  border-radius: 4px;
  color: white;
}
.m14 {
  width: 284px;
  height: 388px;
  margin-left: 16px;
  background: url(../assets/招聘信息/蒙版.png);
  /* border: 1px solid red; */
}
.m15,
.m16 {
  width: 252px;
  height: 150px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}
.m15 {
  margin-left: 16px;
  margin-top: 30px;
}
.m16 {
  margin-left: 16px;
  margin-top: 30px;
}
.m15 h2,
.m16 h2 {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 0px;
  margin-left: 94px;
  padding-top: 40px;
}
.m15 p,
.m16 p {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  line-height: 0px;
  margin-left: 20px;
}
</style>